<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>

    <base href="${pageContext.request.contextPath}/">
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <link href="css/bootstrapValidator.min.css" rel="stylesheet">
    <title>HPELearnSVN版本</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="css/mazhe.css"/>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/global.css">
</head>
<body onresize="setVerNar()" style="min-width:1200px;">
<jsp:include page="../../head.jsp"></jsp:include>
<div class="container col-sm-12" style="padding: 0px;min-width:1200px;margin-top: 82px;">
    <div class="col-sm-12" style="padding: 0px;position:relative;background-color: #eee;min-width:1200px;">
        <div id="myCarousel" class="carousel slide col-sm-12"
             style="z-index: 0;position: absolute;top:0px;padding: 0px">
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="images/band1.png" class=imgCar alt="First slide">
                </div>
                <div class="item">
                    <img src="images/band2.png" class=imgCar alt="Second slide">
                </div>
                <div class="item">
                    <img src="images/band3.png" class=imgCar alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators" style="float: right">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
            <a class="carousel-control right" href="#myCarousel"
               data-slide="next"></a>
        </div>

        <div style="position: relative;padding-left: 6%">
            <div class="vertical_nar_background"></div>
            <div class="vertical_nar">
                <!--垂直导航栏-->
                <ul class="vertical_nar_item">
                    <c:forEach var="dataType" items="${DTList}" varStatus="vs">
                        <li id="vn_${vs.count}" class="vn"
                            onmouseover=showRight(${vs.count})>${dataType.dtname}</li>
                    </c:forEach>
                </ul>
            </div>
            <c:forEach var="ChildMap" items="${ChildList}" varStatus="vs">
                <div class="col-sm-6 vertical_nar vertical_nar_right vb" id="vb_${vs.count}">
                    <div class="col-sm-offset-1" style="margin-top: 5%">
                        <h4 class="title">分类目录</h4>
                        <c:forEach var="mapEntitys" items="${ChildMap}" varStatus="vsm">
                            <c:choose>
                                <c:when test="${vsm.first}">
                                    <br>
                                </c:when>
                                <c:otherwise>
                                    <br><br>
                                </c:otherwise>
                            </c:choose>
                            <span>${mapEntitys.key.dtname}: </span>
                                <c:forEach var="trueDt" items="${mapEntitys.value}" varStatus="vsl">
                                    <c:choose>
                                        <c:when test="${vsl.last}">
                                            <a href="search_findType?dtid=${trueDt.dtid}"> ${trueDt.dtname} </a>
                                        </c:when>
                                        <c:otherwise>
                                            <a href="search_findType?dtid=${trueDt.dtid}"> ${trueDt.dtname} </a>|
                                        </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                        </c:forEach>
                    </div>
                    <br>
                    <div class="col-sm-offset-1" style="margin-top: 5%">
                        <h4 class="title">推荐</h4>
                        <br> 视频 | <a>HTML基础精品视频</a><br> <br> 文档 | <a>CSS从入门到精通</a><br>
                        <br>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>

    <div class="col-sm-12" style="background-color: #eeeeee; min-width:1200px;">
        <div style="margin: 0 auto;min-width:1200px;max-width:1366px;">
            <div class="class_info_row">
                <div class="class_info_left class_color_white"
                     style="background-image:url('images/Java.png')">
                    <h2>Java</h2>
                    <h2>工程师</h2>
                </div>

                <div class="class_info_mid class_div_tall">
                    <a href="page?url=detail">
                        <div
                                class="class_info_mid_top class_info_shadow"
                                style="background:url('images/JavaMid.jpg');">
                            模式宗师养成宝典之Java版
                        </div>
                    </a>
                    <div class="class_info_mid_left class_info_shadow"
                         style="background:url('images/JavaMid_Left.jpg') no-repeat ">
                        <div class="class_info_mid_text">
                            <h4>Java眼中的Xml</h4>
                            <p style="display: none">
                                <small>通过Java认识并创造xml文件</small>
                            </p>
                            <h5>
                                <small>23333人正在学习</small>
                            </h5>
                        </div>
                    </div>
                    <div class="class_info_mid_left class_info_shadow"
                         style="background:url('images/JavaMid_Left1.jpg') no-repeat">
                        <div class="class_info_mid_text"></div>
                    </div>
                    <div class="class_info_mid_right class_info_shadow"
                         style="background: url('images/JavaMid_Left2.jpg') no-repeat">
                        <div class="class_info_mid_text"></div>
                    </div>
                </div>

                <div class="class_info_left nop_nom class_info_shadow"
                     style="height:364px;background:url('images/JavaRight.jpg') repeat-x">
                    <div class="class_info_mid_text">
                        <h4>二进制基础</h4>
                        <p style="display: none">
                            <small>学习计算机必备的基础</small>
                        </p>
                        <h5>
                            <small>57848人在学</small>
                        </h5>
                    </div>
                    <div class="class_info_right_nar">
                        <ul>
                            <a>
                                <li>模式的秘密---责任链模式</li>
                            </a>
                            <a>
                                <li>Hibernate初探之一对多映射</li>
                            </a>
                            <a>
                                <li>Struts2入门</li>
                            </a>
                            <a>
                                <li>Java实现图片水印</li>
                            </a>
                            <a>
                                <li>Java实现权限管理（下）</li>
                            </a>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="class_info_row">
                <div class="class_info_left class_color_white"
                     style="background-image:url('images/Web.png')">
                    <h2>Web</h2>
                    <h2>前端工程师</h2>
                </div>

                <div class="class_info_mid class_div_tall">
                    <div class="class_info_mid_top class_info_shadow"
                         style="background:url('images/JavaMid.jpg');"></div>
                    <div class="class_info_mid_left class_info_shadow"
                         style="background:url('images/JavaMid_Left.jpg') no-repeat ">
                        <div class="class_info_mid_text"></div>
                    </div>
                    <div class="class_info_mid_left class_info_shadow"
                         style="background:url('images/JavaMid_Left1.jpg') no-repeat">
                        <div class="class_info_mid_text"></div>
                    </div>
                    <div class="class_info_mid_right class_info_shadow"
                         style="background: url('images/JavaMid_Left2.jpg') no-repeat">
                        <div class="class_info_mid_text"></div>
                    </div>
                </div>

                <div class="class_info_left nop_nom class_info_shadow"
                     style="height:364px;background:url('images/JavaRight.jpg') repeat-x">
                    <div class="class_info_mid_text">
                        <h4>二进制基础</h4>
                        <p style="display: none">
                            <small>学习计算机必备的基础</small>
                        </p>
                        <h5>
                            <small>57848人在学</small>
                        </h5>
                    </div>
                    <div class="class_info_right_nar">
                        <ul>
                            <a>
                                <li>模式的秘密---责任链模式</li>
                            </a>
                            <a>
                                <li>Hibernate初探之一对多映射</li>
                            </a>
                            <a>
                                <li>Struts2入门</li>
                            </a>
                            <a>
                                <li>Java实现图片水印</li>
                            </a>
                            <a>
                                <li>Java实现权限管理（下）</li>
                            </a>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="class_info_row">
                <div class="class_info_left class_color_white"
                     style="background-image:url('images/Android.png')">
                    <h2>Android</h2>
                    <h2>工程师</h2>
                </div>

                <div class="class_info_mid class_div_tall">
                    <div class="class_info_mid_top class_info_shadow"
                         style="background:url('images/JavaMid.jpg');"></div>
                    <div class="class_info_mid_left class_info_shadow"
                         style="background:url('images/JavaMid_Left.jpg') no-repeat ">
                        <div class="class_info_mid_text"></div>
                    </div>
                    <div class="class_info_mid_left class_info_shadow"
                         style="background:url('images/JavaMid_Left1.jpg') no-repeat">
                        <div class="class_info_mid_text"></div>
                    </div>
                    <div class="class_info_mid_right class_info_shadow"
                         style="background: url('images/JavaMid_Left2.jpg') no-repeat">
                        <div class="class_info_mid_text"></div>
                    </div>
                </div>

                <div class="class_info_left nop_nom class_info_shadow"
                     style="height:364px;background:url('images/JavaRight.jpg') repeat-x">
                    <div class="class_info_mid_text">
                        <h4>二进制基础</h4>
                        <p style="display: none">
                            <small>学习计算机必备的基础</small>
                        </p>
                        <h5>
                            <small>57848人在学</small>
                        </h5>
                    </div>
                    <div class="class_info_right_nar">
                        <ul>
                            <a>
                                <li>模式的秘密---责任链模式</li>
                            </a>
                            <a>
                                <li>Hibernate初探之一对多映射</li>
                            </a>
                            <a>
                                <li>Struts2入门</li>
                            </a>
                            <a>
                                <li>Java实现图片水印</li>
                            </a>
                            <a>
                                <li>Java实现权限管理（下）</li>
                            </a>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../../footer.jsp"></jsp:include>

</body>
<script>
    $(".imgCar").css("width", $(window).width() + "px");
    function setVerNar() {
        $(".vertical_nar_background").height($("#myCarousel").height());
        $(".vertical_nar").height($("#myCarousel").height());
        var lineHeight = $("#myCarousel").height() / ${BigTypeCount};
        $(".vertical_nar_item li").css("line-height", lineHeight + "px");
    }
</script>
<script src="js/mazhe.js"></script>
</html>